!(function () {
    var toHover = document.getElementById('toHovor');
    toHover.addEventListener("mouseenter",appear);
    function appear() {
        toHover.innerHTML = '<form id="aForm" method="get" action="">\n' +
            '            <input type="text" placeholder="用户名">\n' +'<br>'+
            '            <input type="password" placeholder="密码">\n' +'<br>'+
            '            <input type="submit" value="提交">\n' +
            '        </form>'
    }
    toHover.addEventListener("mouseleave",clear);
    function clear(){
        toHover.innerHTML = '';
    }

    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    var context = canvas.getContext('2d');


    function reSize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        clearCanvas();
    }

    function clearCanvas() {
        context.fillStyle = "#00ffff"
        context.fillRect(0,0,canvas.width,canvas.height);

    }

    reSize();

    window.addEventListener('resize',wave);
    window.addEventListener("resize",reSize);
    var r = 30;
    function wave() {
        clearCanvas();
        r+=10;
        if (r>=100) r=30;
        var local = toHover.getBoundingClientRect();
        context.beginPath();
        context.arc(local.x+local.width/2,local.y+local.height/2,r,0,Math.PI*2,false);

        context.strokeStyle = "#ff0099";
        context.globalAlpha = 0.7;
        context.stroke();
        context.closePath();
    }

    var cal = 1;
    function change1() {
        cal = 1;
        run();
    }
    function change0() {
        cal = 0;
        clearCanvas();
    }

    function run() {
        wave();
        console.log(cal);
        /*if (cal === 1) {
            clearCanvas();
            exit(-1);
        }*/
        if (cal === 1) setTimeout(run,150);
        else  {
            clearCanvas();
        }
        // requestAnimationFrame(run);
    }
    run();

    toHover.addEventListener('mouseenter',change0);
    toHover.addEventListener('mouseleave',change1);


})()